<template>
  <view class="container">
    <view class="header">一键提取音视频文案</view>
    <view class="tabs">
      <view class="tab-item flexLeftCenter" @click="extract">
        <uni-icons type="link" size="30"></uni-icons>
        <view class="content">
          <view class="title">短视频链接</view>
          <view class="describe">抖音、快手等链接</view>
        </view>
      </view>
      <view class="tab-item flexLeftCenter" @click="chooseVideo">
        <uni-icons type="videocam" size="30"></uni-icons>
        <view class="content">
          <view class="title">本地视频</view>
          <view class="describe">提取相册视频文案</view>
        </view>
      </view>
    </view>
    <!-- <view class="result">
      <view class="size">文件大小：{{ size }}，文案提取{{ state == 1 ? '成功' : '失败' }}</view>
      <view class="title">提取结果文案(语言时长：{{ duration }}) 字符数{{ character }}</view>
      <view class="copywriting">{{ copywriting }}</view>
      <view class="operate">
        <view class="btn" @click="copy">复制文案</view>
      </view>
    </view> -->
    <view class="prompt">
      <view class="title">温馨提示</view>
      <view class="content">1.一般需要20秒左右,视频越长,需要的时间越长!</view>
    </view>
  </view>
</template>

<script>
import { getUrlVideoText } from '@/api/common.js'
import subscribe from '@/utils/subscribe'
export default {
  data() {
    return {
      size: '1.3M', // 文件大小
      duration: '56s', // 时长
      character: 600, // 字符数
      copywriting: '无人扶我青云志 我自踏雪至山巅',
      state: 1 // 状态
    }
  },
  onLoad() {},
  methods: {
    ...subscribe,
    // 选择视频
    chooseVideo() {
      let that = this
      uni.chooseMedia({
        count: 1,
        mediaType: ['video'],
        sourceType: ['album'],
        success(res) {
          // console.log(res.tempFiles)
          that.getVideoText(res.tempFiles[0].tempFilePath)
        }
      })
    },
    // 提取文案
    extract() {
      let that = this
      wx.getClipboardData({
        success: function (res) {
          let url = res.data
          if (!url) {
            uni.showToast({
              icon: 'none',
              title: '请先复制链接'
            })
            return
          }
          that.getVideoText(url)
        }
      })
    },
    // 复制文案
    copy() {
      let that = this
      uni.setClipboardData({
        //复制文本
        data: that.copywriting,
        success: function (res) {
          uni.showToast({
            title: '复制成功',
            icon: 'none',
            mask: true
          })
        }
      })
    },
    getVideoText(url) {
      uni.showLoading({
        title: '提取中...',
        mask: true
      })
      getUrlVideoText({
        url
      })
        .then((res) => {
          uni.hideLoading()
          uni.showToast({
            title: res.data,
            icon: 'none'
          })
          this.getSubscribeList(true)
        })
        .catch((err) => {
          uni.hideLoading()
        })
    }
  }
}
</script>

<style lang="scss" scoped>
.container {
  padding: 20rpx;
  .header {
    color: #666;
  }
  .tabs {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-gap: 20rpx;
    margin-top: 20rpx;
    .tab-item {
      padding: 20rpx;
      background: #fff;
      border-radius: 20rpx;
      .content {
        margin-left: 20rpx;
        .title {
          font-weight: 600;
        }
        .describe {
          color: #999;
          font-size: 24rpx;
          margin-top: 10rpx;
        }
      }
    }
  }
  .result {
    margin-top: 30rpx;
    .size {
      padding: 20rpx 10rpx;
      background-color: #fff;
      color: #999;
    }
    .title {
      color: #333;
      margin: 20rpx 0;
    }
    .copywriting {
      padding: 20rpx 10rpx;
      background-color: #fff;
    }
    .operate {
      margin-top: 20rpx;
      .btn {
        flex: 1;
        height: 80rpx;
        line-height: 80rpx;
        text-align: center;
        background: #3c96f3;
        border-radius: 40rpx;
        color: #fff;
      }
    }
  }
  .prompt {
    margin-top: 30rpx;
    .title {
      font-weight: 600;
      font-size: 30rpx;
    }
    .content {
      color: #999;
      margin-top: 10rpx;
    }
  }
}
</style>
